<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>员工列表</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div id="wrap">
			<div id="top_content"> 
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20 
							<br />
							<a href="javascript:;" @click="logout">安全退出</a>
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="#">main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						Welcome!<span v-show="user!=null">{{ user.realname}}</span>
					</h1>
					<table class="table">
						<tr class="table_header">
							<td>
								ID
							</td>
							<td>
								Name
							</td>
							<td>
								Photo
							</td>
							<td>
								Salary
							</td>
							<td>
								Age
							</td>
							<td>
								Operation
							</td>
						</tr>
						<tr v-for="emp in empList" :key="emp.id" class="row1">
							<td>
								{{emp.id}}
							</td>
							<td>
								{{emp.name}}
							</td>
							<td>
								<img :src="'/'+emp.path" style="height: 60px;">
							</td>
							<td>
								{{emp.salary}}
							</td>
							<td>
								{{emp.age}}
							</td>
							<td>
								<a href="javascript:;" @click="deleteEmp(emp.id)">删除</a>&nbsp;<a :href="'updateEmp.html?id='+emp.id">更新</a>
							</td>
						</tr>
					</table>
					<p>
						<input type="button" class="button" value="Add Employee" onclick="location='addEmp.html'"/>
					</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
				ABC@126.com
				</div>
			</div>
		</div>
	</body>
</html>
<!--引入Vue-->
<script src="/js/vue.js"></script>
<!--引入axios-->
<script src="/js/axios.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<script type="text/javascript">
	var vue=new Vue({
		el:"#wrap",
		data:{
         user:{},
        empList:[]
		},
		created(){
			var userString=localStorage.getItem("item");
			if(userString){
				this.user=JSON.parse(userString);
			}
			else{
				window.location.href="/login.html"
			}
			this.findAll()
		},
		methods: {
			findAll(){
				axios.get("http://localhost:8888/emp/findAll")
						.then(response=>{
							console.log(response.data.data)
							this.empList=response.data.data.list
						})
			},
           //退出
			logout(){
				localStorage.removeItem("item");
				location.reload(true);
			},
			//删除员工
			deleteEmp(id){
				axios.delete("http://localhost:8888/emp/delete?id="+id)
				.then(response=>{
					window.location.reload()
				})
			}
		}
	})
</script>